<template>
  <PanelBlock>
    <span style="display: flex; flex-direction: column">
      <span style="display: flex; align-items: flex-end; flex-direction: row;">
        <span class="clickable user-name" style="margin-right: 5px" @click="toUser(data.id)">{{ data.name }}</span>
        <span class="clickable secondary-info" @click="toEnterprise(data.enterprise_id)">{{ data.enterprise_name }}</span>
        <span class="secondary-info"><span style="margin: 0 2px">·</span>{{ data.enterprise_position }}</span>
      </span>
      <span class="secondary-info" style="display: flex; flex-direction: row">
        <el-icon style="width: 20px; height: 20px"><School style="font-size: 20px;"/></el-icon>
        <span class="secondary-info">{{ data.school + " " + data.education }}</span>
      </span>
      <span class="intro">{{ data.intro }}</span>
    </span>

<!--    <el-tag>{{ data.skills }}</el-tag>-->
<!--    <span v-if="data.in_enterprise">-->
<!--    </span>-->
    <my-button type="light" :width="80">关注</my-button>
  </PanelBlock>
</template>

<script>

import {School} from "@element-plus/icons-vue";
import PanelBlock from "@/components/PanelBlock.vue";
import MyButton from "@/components/common/myButton.vue";

export default {
  name: "UserEle",
  components: {MyButton, PanelBlock, School},
  props: {
    data: {
      type: Object,
      default: () => ({
        id: 1,
        name: "58Q83",
        sex: 'M',
        education: "本科",
        school: "北京航空航天大学",
        skills: "人工智能、大数据分析",
        intro: "主要从事软件工程、信号与信息处理、大数据分析、人机交互、科技金融、人工智能等方面的研究。",
        in_enterprise: true,
        enterprise_id: 1,
        enterprise_name: "神奇技术公司",
        enterprise_position: "总经理",
        is_admin: true,
      })
    }
  },
  methods: {
    toUser(id) {
      this.$router.push({path: "/personalinfo", query: {id: id} });
    },
    toEnterprise(id) {
      this.$router.push({path: "/enterprise", query: {enterpriseId: id} });
    },
  }
}
</script>

<style scoped>
.user-name {
  font-size: var(--font-size-large);
  font-weight: 600;
}
.secondary-info {
  font-size: var(--font-size-small);
  color: grey;
  display: flex;
  white-space: nowrap; /*禁止换行*/
}
.intro {
  font-size: 12px;
}
.clickable:hover {
  cursor: pointer;
  color: var(--color-primary);
  text-decoration: underline;
}
</style>